<template>
  <div class="w-full h-full flex flex-col">
    <div  class="flex-1 h-0">
      <el-table v-loading="loading" height="100%" border ref="tablePostRef" @select-all="selectAllCallback"
                @select="selectCallback" :data="postData">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="职位名称" header-align="center" align="center" prop="postName">
        </el-table-column>
      </el-table>
    </div>
    <div >
      <BasePage @load="loadPost"  v-model:current="queryForm.current" v-model:size="queryForm.size"
                :total="queryForm.total"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {nextTick, onMounted, PropType, reactive, ref, watch} from "vue";
import {listPostPage} from "/@/api/system/PostApi";
import {PostModel} from "/@/api/system/model/PostModel";
const emit = defineEmits(['setPost','setPostAll'])
const postData = ref<PostModel[]>([])
const loading = ref(false)
const tablePostRef = ref()
const queryForm = reactive({
  total: 0,
  current: 1,
  size: 10
})

const loadPost = async () => {
  loading.value = true
  let res = await listPostPage(queryForm, () => {
    loading.value = false
  },false)
  postData.value = res.records
  queryForm.total = res.total
}

/**
 * 点击全选按钮回调
 */
const selectAllCallback = (selection) => {
  if (selection.length > 0) {
    emit("setPostAll",selection,"postId","postName")
  } else {
    emit("setPostAll",[],"postId","postName")
  }
}
/**
 * 点击选中按钮回调
 */
const selectCallback = (selection, row) => {
  //查找列表中是否有当前行，判断当前操作是否为选中
  let index = selection.findIndex(res => res.postId == row.postId)
  if (index != -1) {
    emit("setPost",'add',row,"postId","postName")
  } else {
    emit("setPost",'delete',row,"postId","postName")
  }
}
/**
 * 设置选中
 * @param postIds
 */
const setSelectedRow = (postIds) => {
  tablePostRef.value.clearSelection()
  postData.value.forEach(res => {
    if (postIds.includes(res.postId)) {
      tablePostRef.value.toggleRowSelection(res, undefined)
    }
  })
}
onMounted(() => {
  loadPost()
})
defineExpose({setSelectedRow})
</script>

<style scoped>

</style>